<template>
  <uv-popup mode="bottom" custom-style="height: 100vh;" ref="codePopupRef">
    <view class="popup-content">
      <k-image
        :src="$TOOL.url('/customer/index/code_top.png')"
        width="750rpx"
        height="431rpx"
      ></k-image>
      <view class="code-box">
        <uv-navbar
          title="取餐码"
          @leftClick="closePopup"
          bgColor="transparent"
          leftIconColor="#ffffff"
          :titleStyle="titleStyle"
        ></uv-navbar>
        <view class="code-content">
          <view class="df-cc">
            <k-image
              :src="$TOOL.url('/customer/index/code_bg.png')"
              width="690rpx"
              height="898rpx"
            ></k-image>
          </view>
          <view class="code-info">
            <view class="title text-less-color-1 mt-184rpx"
              >欢迎使用{{ mechanismName }}订餐号订餐～</view
            >
            <view class="code-img df-cc mt-26rpx" v-if="codeValue">
              <uv-qrcode ref="qrcode" size="394rpx" :value="codeValue">
              </uv-qrcode>
            </view>
            <view class="code-img" v-else>
              <k-emtpy text=""></k-emtpy>
              <view class="empty-text">
                当前非就餐时间
                <view>请于就餐时间段查询/使用取餐码</view>
              </view>
            </view>
          </view>
          <view class="close-box df-cc" @tap="closePopup">
            <text class="custom-icon custom-icon-quxiao"></text
          ></view>
        </view>
      </view>
    </view>
  </uv-popup>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { getMemberVerifyCode } from '@/api/methods/orderFood';

defineProps({
  mechanismName: {
    type: String,
    default: '',
  },
});
uni.hideTabBar();
const codePopupRef = ref();
function openPopup() {
  codePopupRef.value.open();
}
const codeValue = ref();
const oldLightVal = ref(0);
const emits = defineEmits(['close']);
function closePopup() {
  emits('close');
  codePopupRef.value.close();
  uni.setScreenBrightness({
    value: oldLightVal.value,
  });
}
const setScreenBrightness = () => {
  uni.getScreenBrightness({
    success: (res) => {
      oldLightVal.value = res.value;
    },
  });
  uni.setScreenBrightness({
    value: 1,
  });
};
const getCode = async () => {
  const result = await getMemberVerifyCode();
  codeValue.value = result.code;
  setScreenBrightness();
};
onMounted(() => {
  getCode();
  openPopup();
});
const titleStyle = { color: '#ffffff' };
</script>
<style scoped lang="scss">
.popup-content {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  background: linear-gradient(0, rgba(15, 188, 0, 0) 0%, #0c7403 100%);
  .code-box {
    width: 100%;
    height: 898rpx;
    text-align: center;
    position: absolute;
    top: 0;
    margin: 0 auto;
    z-index: 9;
    .code-content {
      top: calc(50vh - 489rpx);
      position: relative;
    }
    .code-info {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      text-align: center;
    }
  }
  .close-box {
    width: 102rpx;
    height: 102rpx;
    background: #ffffff;
    border-radius: 100%;
    color: #000000;
    color: rgba(0, 0, 0, 0.7);
    margin: 80rpx auto 0;
    font-weight: bold;
    position: relative;
    z-index: 2;
  }
}
</style>
